<template>
  <h1>10-组合API-ref函数</h1>
  <h2>{{ number }}</h2>
  <button @click="number++">点击</button>
  <button @click="btn(10)">点击加10</button>
</template>

<script>
import { reactive, ref } from 'vue'
/* 
  学习目标：
*/
export default {
  name: 'App',
  setup() {
    // 💥reactive 不能让基本类型数据变成响应式
    // const number = reactive(0)
    // console.log(typeof number);  // 普通类型数据

    // 🔔 ref 可以让基本类型数据也变成响应式
    const number = ref(0)

    console.log(' typeof number 数据类型', typeof number) // object
    console.log(' number 响应式数据', number) // RefImpl 响应式数据
    console.log(' number.value 真正的数据', number.value) // 真正的数据

    const btn = val => {
      number.value += val
    }

    return { number, btn }
  },
}
</script>